@import url("./main.css");



.a-main{

    display: grid;

    grid-template-columns: 65% 35%;

    height:calc(100vh - 100px);

    padding-left: 2.5vw;

    padding-top: 20px; 

}



.old-as{

    width: 100%;

    height:calc(100vh - 130px);

    overflow: auto;

    overflow-x: hidden;



    display: flex;

    flex-direction: column;

}



.about-header{

    font-size: 20px;

    color:var(--menu-hover-color);

    letter-spacing: -1px;

}



.old-alist{

    display: flex;

    /*justify-content:center;*/

    /*text-align: center;*/

    padding-left:20px;

    margin-right:50px;

    height: 7vh;

    border-radius: 10px;

    align-items: center;

	color : var(--font-color);

    background-color:var(--menu-bg-color);

}



.newas{

    height:calc(100% - 1rem);



    width: 100%;

    overflow: hidden;

    margin-left:20px;

}



.box{

	position: relative;	

	width: 95%;

    height:400px;

	background: transparent;

	border-radius: 8px;

	overflow: hidden;

}



.box::before 

{

	content: '';

	z-index: -2;

	position: absolute;

	top: -50%;

	left: -50%;

	width: 100%;

	height: 100%;

	transform-origin: bottom right;

	background: linear-gradient(0deg,transparent,rgb(36, 91, 149),rgb(36, 91, 149));

	animation: animate 6s linear infinite;

}



.box::after 

{

	content: '';

	z-index: -2;

	position: absolute;

	top: -50%;

	left: -50%;

	width: 100%;

	height: 100%;

	transform-origin: bottom right;

	background: linear-gradient(0deg,transparent,rgb(36, 91, 149),rgb(36, 91, 149));

	animation: animate 6s linear infinite;

	animation-delay: -3s;

}

@keyframes animate 

{

	0%

	{

		transform: rotate(0deg);

	}

	100%

	{

		transform: rotate(360deg);

	}

}



form {

	position: absolute;

	inset: 2px;

	color: var(--font-color);

	background: var(--menu-bg-color);

	padding: 40px 40px;

	border-radius: 8px;

	z-index: 0;

	display: flex;

	flex-direction: column;

}



.inputBox 

{

	position: relative;

	width: 300px;

	margin-top: 20px;

}



.inputBox input 

{

	position: relative;

	width: 100%;

	padding: 20px 10px 10px;

	background: transparent;

	outline: none;

	box-shadow: none;

	border: none;

	color: var(--font-color);

	font-size: 1em;

	letter-spacing: 0.05em;

	transition: 0.5s;

	z-index: 10;

}



.inputBox span 

{

	position: absolute;

	left: 0;

	padding: 20px 0px 10px;

	pointer-events: none;

	font-size: 1em;

	color: #8f8f8f;

	letter-spacing: 0.05em;

	transition: 0.5s;

}



.inputBox input:valid ~ span,

.inputBox input:focus ~ span 

{

	color: var(--menu-hover-color);

	transform: translateX(0px) translateY(-34px);

	font-size: 0.75em;

}



input[type="submit"]

{

	border: none;

	outline: none;

	padding: 11px 25px;

	background:rgb(36, 91, 149);

	cursor: pointer;

	border-radius: 4px;

    color : #ffff;

	font-weight: 600;

	width: 50%;

	margin-top: 10px;

    position: center;

}

input[type="submit"]:active 

{

	opacity: 0.8;

}



.mobile-education{

    display: none;

}



.videos {

	background-color: transparent;

	width: 100%;

	height: 100%;

	padding-top:15px;

	padding-bottom:15px;

	padding-right:15px;

	overflow-y: auto;

}



.videos-container {

	width: 100%;

	display: flex;

	flex-direction: row;

	justify-content: space-between;

	flex-wrap: wrap;

	background-color: var(--menu-bg-color);

	border-radius: 10px;

	padding:20px;

	box-shadow: 0 0 40px rgba(0, 0, 0, 0.05);

  

}



.video {

	width: 225px;

	margin-bottom: 30px;

}

  

.video-thumbnail {

	width: 100%;

	height: 125px;

}

  

.video-thumbnail iframe {

	object-fit: cover;

	height: 100%;

	width: 100%;

	border-radius: 10px;

}

  

.video-thumbnail img {

	object-fit: cover;

	height: 100%;

	width: 100%;

	border-radius: 10px;

}



.video-details {

	display: flex;

	margin-top: 10px;

}

	

.title {

	display: flex;

	flex-direction: column;

}

	

.title h3 {

	color: var(--font-color);

	line-height: 18px;

	font-size: 14px;

	margin-bottom: 6px;

}

	

.title a,

span {

	text-decoration: none;

	color: rgb(96, 96, 96);

	font-size: 14px;

}

	

h1 {

	font-size: 20px;

	margin-bottom: 10px;

	color: var(--font-color);

}



@media screen and (max-width:1028px){

    .a-main{

        display: grid;

        grid-template-columns: 100%;

    }



    .newas{

        display:none;

    }



    .main-header{

        margin-right:2.5vw;

    }



    .box{

        width: 97%;

    }



    .videos{

        margin-right:2.5vw;

    }



    .mobile-education{

        display: contents;

        margin:0;

    }



}



@media screen and (max-width:600px){

    .videos{

        padding-left:20px;

        padding-right:20px;

        /*margin-top:30px;*/

    }



    .old-alist{

        margin:0;

    }



    .box{

        width:100%;

    }

}