*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    --fontsize:.8rem;/*for screen less than 600*/
    --gap:.3rem;
    --padding:.4rem;
    transition: all 600ms;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
}
.page
{    
    width:min(1200px,95%);
    display:grid;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "header-area"
    "session-area"
    "classlist-area"
    "classdetails-area"
    "studentlist-area"
    ;
    padding-top:calc(var(--padding)*8);
    padding-bottom:calc(var(--padding)*8);
    border-bottom:solid black 1px;
    animation:fadein 700ms linear;
}
@keyframes fadein {
    0%{opacity: 0;}
    100%{opacity: 1;}
}
.header-area
{
   grid-area: header-area; 
   display:grid;
   grid-template-columns: 1fr 1fr;
   grid-template-areas: "logo-area logout-area";
   /*border:solid 1px black;temporary,just to view*/
   gap:var(--gap);
   padding:var(--padding);
   border-bottom:solid 1px pink;
}
.logo-area
{
    grid-area: logo-area;
    display: flex;
    justify-content: start;
    align-items: center;
}
.logout-area
{
    grid-area: logout-area;
    display: flex;
    justify-content: end;
    align-items: center;
}


.session-area
{
   grid-area: session-area; 
   display:grid;
   grid-template-columns: 1fr;
   grid-template-rows: .5fr 1fr;
   grid-template-areas: "label-area"
   "dropdown-area";
   gap:var(--gap);
   padding:var(--padding);
   border-bottom:solid 1px pink;
}
.label-area
{
    grid-area: label-area;
    font-size: calc(var(--fontsize)*.8);
    padding-left:calc(var(--padding)*.6);
}
.dropdown-area
{
    grid-area: dropdown-area;
    font-size: calc(var(--fontsize)*1);
    padding-top:calc(var(--padding));
    padding-bottom:calc(var(--padding));
}
.classlist-area
{
   grid-area: classlist-area; 
   display:flex;
   flex-wrap: wrap;
   gap:var(--gap);
   padding:var(--padding);
   justify-content: center;
   align-items: center;
   border-bottom:solid 1px pink;
}
.classdetails-area
{
   grid-area: classdetails-area; 
   gap:var(--gap);
   padding:var(--padding);
   border-bottom:solid 1px pink;
   text-transform: uppercase;
}
.studentlist-area
{
   grid-area: studentlist-area; 
   /*dummy colors;just to view*/
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap:var(--gap);
   padding:var(--padding);
   border-bottom:solid 1px pink;
}

.btnlogout
{
    font-size: var(--fontsize);
    width:5em;
    padding:var(--padding);
    background-color: rgb(69, 69, 211);
    color:white;
    border:solid 1px rgb(69, 69, 211);
    border-radius:.1em;
}
.logo
{
    font-size: calc(var(--fontsize)*2.6);
}
.ddlclass
{
    width:100%;
    outline: none;
    border:none;
    background-color: transparent;
    border-bottom:solid 1px blue;   
}
.classcard
{
    font-size: calc(var(--fontsize)*1);
    width:4.5em;
    height: 4.5em;
    border-radius: .2em;
    background-color: rgb(0, 145, 255);
    color:white;
    display:flex;
    justify-content: center;
    align-items: center;
}
.classcard:hover{
    background-color: rgb(226, 43, 174);
    color:white;
    animation:tilt 500ms linear;
}
@keyframes tilt {
    0%{transform: rotate(0deg);}
    15%{transform: rotate(-30deg);}
    30%{transform: rotate(0deg);}
    45%{transform: rotate(25deg);}
    60%{transform: rotate(0deg);}
    70%{transform: rotate(-20deg);}
    80%{transform: rotate(0deg);}
    90%{transform: rotate(10deg);}
   100%{transform: rotate(0deg);}
}

.classdetails
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 2fr 1fr;
    grid-template-areas:
    "title-area title-area"
    "code-area ondate-area" ;
    gap:var(--gap);
    font-size: var(--fontsize);
}
.title-area
{
    grid-area: title-area;
    display: flex;
    justify-content: start;
    align-items: center;
}
.code-area
{
    grid-area: code-area;
    display: flex;
    justify-content: start;
    align-items: center;
}
.ondate-area
{
    grid-area: ondate-area;
    display: flex;
    justify-content: end;
    align-items: center;
}
.ondate-area >input
{
    font-size: var(--fontsize);
    background-color: transparent;
    border:none;
    border-bottom:solid 1px blue;
    outline: none;
}
.studenttlist
{
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
}
.studenttlist >label{
    font-size: calc(var(--fontsize)*.8);
}

.studentdetails
{
    display:grid;
    grid-template-columns: .25fr 1.5fr .4fr;
    grid-template-rows: 1fr  1fr;
    grid-template-areas: 
    "slno-area rollno-area checkbox-area"
    "name-area name-area checkbox-area"
    ;
    gap:var(--gap);
    width:100%;
    font-size: var(--fontsize);
    padding-top:calc(var(--padding)*1.5);
    padding-bottom:calc(var(--padding)*1.5);
    border-bottom:solid 1px pink;
    transition: all 300ms;
    text-transform: uppercase;
}
.studentdetails:hover
{
background-color: rgb(0, 106, 255);
color:white;
}
.reportsection
{
    width:100%;
    font-size: var(--fontsize);
    padding-top:calc(var(--padding)*1.5);
    padding-bottom:calc(var(--padding)*1.5); 
    display: flex;
    align-items: center;
    justify-content: center;
}
#btnReport
{
  width:6rem;
  padding:var(--padding);
  background-color: pink;
  border: solid 1px rgb(218, 11, 45);
  border-radius: .2rem;
}

.checkbox-area
{
    display: flex;
    justify-content: end;
    align-items: center;
}
.checkbox-area >input
{
    font-size: var(--fontsize);
    width: 1.5em;
    height: 1.5em;
}


.slno-area
{
    grid-area: slno-area;
}
.rollno-area
{
    grid-area: rollno-area;
}
.name-area
{
    grid-area: name-area;
}
.checkbox-area
{
    grid-area: checkbox-area;
}
.absentcolor
{
   background-color: rgb(212, 69, 98);
}
.presentcolor
{
    background-color: rgb(69, 212, 117);
}
@media only screen and (min-width:600px) {
    *{
        
        --fontsize:.9rem;/*for screen less than 767 > 600*/
    }
}
/*if the screen size is larger than 600px*/
@media only screen and (min-width:767px) {
    *{
        
        --fontsize:1rem;/*for screen  > 767*/
    }
    .session-area
    {
    grid-template-columns: .5fr .5fr 1fr .5fr;
    grid-template-rows: 1fr;
    grid-template-areas: "... label-area dropdown-area ...";   
    }
    .label-area
    {
       display: flex;
       justify-content: end;
       align-items: center;
       padding-left:calc(var(--var)*1);
    }
    .classdetails
    {
        grid-template-columns: 1fr 3fr 1fr;
        grid-template-rows: 1fr;
        grid-template-areas:
        "code-area title-area ondate-area";
        padding-bottom:calc(var(--padding)*1);
        padding-top:calc(var(--padding)*1);
    }

    .studentdetails
    {
        display:grid;
        grid-template-columns: 1fr 2fr 3fr 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: 
        "slno-area rollno-area name-area checkbox-area";
       /*removed properties,it means they are the same settings*/
    }
    .studentdetails>*
    {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}