style.css

*{
box-sizing:border-box;
margin:0;
padding:0;
}
main{
font-family:Ubuntu,Verdana;
margin:auto;
width:70%;
}
section{
margin:2em;
padding:1.5em 2em;
}
footer{
text-align:center;
}
h3{
font-size:2em;
}
h4{
font-size:1.5em;
padding:0.9em 0;
}
#header{
padding:2em;
text-align:center;
}
#title{
font-size:2.7em;
padding:1em 0;
}
#abm p{
padding:0.9em 0;
text-align:justify;
}
#author{
font-size:1.2em;
padding:3em 0;
margin:0;
}
#author a{
text-decoration:none;
}
.right{
text-align:right!important;
padding:0.5em 0!important;
}
br{
margin-top:2em;
}
#top{
font-size:1.2em;
text-align:right;
padding:0.5em 0;
}
#top a{
padding:0.5em 1.5em;
text-decoration:none;
}
.frw{
display:flex;
flex-wrap:wrap;
margin:3% 0;
}
.fc21{
flex:30%;
padding:3em 5% 1em;
}
.fc22{
flex:50%;
padding:3em 5%;
}
.fc31{
flex:30%;
padding:3em 5% 1em;
}
.fc32{
flex:26%;
padding:3em 2%;
}
.fc33{
flex:24%;
padding:3em 3%;
}
#tt{
font-size:1.2em;
padding:2em 0 0;
}
#gkb{
display:grid;
grid-template-columns: repeat(9, 1fr);
padding:1em 0 0.3em;
}
.gfd{
border:0;
text-align:center;
}
.btn{
border:0;
font-size:1.2em;
height:1.8em;
width:1.8em;
margin:0.2em;
}
.gtb{
display:grid;
grid-template-columns: auto auto;
}
.gcl{
font-size:1.2em;
padding:1em 0.5em;
text-align:center;
}
#text{
margin:0 1em 1em;
}
.inb input{
border:0;
display:block;
font-size:9em;
height:1.5em;
margin:auto;
width:1.2em;
text-align:center;
}
.ind{
text-align:center;
}
.ind label{
font-size:1.4em;
}
.ind input{
border:0;
font-size:1.4em;
margin:0 0.5em;
padding:0.5em;
width:12em;
}
.btc{
text-align:center;
}
.btc button{
border:0;
font-size:1.2em;
margin:1.5em 0.5em 0;
padding:0.5em;
width:5em;
}
#tt{
text-align:center;
}
.lex{
font-size:1.2em;
list-style-type:none;
margin:2em 0 0.5em;
}
.lex li{
padding:0.5em 0;
}
#chc{
padding:0.3em 1em;
position:fixed;
right:0;
text-align:right;
top:0;
width:100%;
}
#chc button{
height:15px;
margin:0.3em;
width:15px;
}
#ssheet1{
background-color:rgba(138,43,226,1);
}
#ssheet1:hover{
background-color:rgba(138,43,226,0.5);
}
#ssheet2{
background-color:rgba(255,165,0,1);
}
#ssheet2:hover{
background-color:rgba(255,165,0,0.5);
}
#ssheet3{
background-color:rgba(13,152,186,1);
}
#ssheet3:hover{
background-color:rgba(13,152,186,0.5);
}
#ssheet4{
background-color:rgba(255,0,0,1);
}
#ssheet4:hover{
background-color:rgba(255,0,0,0.5);
}
#ssheet5{
background-color:rgba(154,205,50,1);
}
#ssheet5:hover{
background-color:rgba(154,205,50,0.5);
}
noscript{
font-size:1.2em;
margin:2em auto;
padding:2.5em;
text-align:center;
width:66%;
}
@media (max-width:1300px) {
main{
width:75%;
}
}
@media (max-width:1200px) {
main{
width:80%;
}
}
@media (max-width:1100px) {
main{
width:85%;
}
}
@media (max-width:1000px) {
main{
width:90%;
}
}
@media (max-width:960px) {
main{
width:95%;
}
}
@media (max-width:860px) {
main{
width:100%;
}
.fc32,.fc33{
padding:1em 3%;
}
.ind label{
font-size:1em;
}
.ind input{
font-size:1.2em;
margin-left:0.5em;
padding:0.5em;
width:10em;
}
.btn{
font-size:1.2em;
height:1.5em;
width:1.5em;
margin:0.1em;
}
}
@media (max-width:800px) {
main{
width:100%;
}
.fc32,.fc33{
padding:0 3%;
}
.btn{
font-size:1.2em;
height:1.5em;
width:1.5em;
margin:0.1em;
}
.inb input{
font-size:7em;
height:1.5em;
width:1.5em;
}
.ind label{
font-size:1em;
}
.ind input{
font-size:1.2em;
margin-left:0.5em;
padding:0.5em;
width:10em;
}
}
@media (max-width:700px) {
main{
width:100%;
}
.fc21,.fc22,.fc31,.fc32,.fc33{
flex:100%;
}
.fc32,.fc33{
padding:0 3%;
}
.btn{
font-size:1.2em;
height:1.5em;
width:1.5em;
margin:0.1em;
}
}
@media (max-width:600px) {
main{
width:100%;
}
.fc21,.fc22,.fc31,.fc32,.fc33{
flex:100%;
padding:1em 0.5em;
}
.inb input{
font-size:7em;
height:1.5em;
width:1.5em;
}
.ind label{
font-size:1em;
}
.ind input{
font-size:1.4em;
margin-left:0.5em;
padding:0.5em;
width:10em;
}
.btn{
font-size:1.2em;
height:1.5em;
width:1.5em;
margin:0.1em;
}
}