@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Bitcount+Grid+Double:wght@100..900&family=Bitcount+Prop+Double:wght@100..900&family=Bitcount+Prop+Single:wght@100..900&family=Bitcount:wght@100..900&family=Dancing+Script:wght@400..700&family=Fascinate&family=Luckiest+Guy&family=Manufacturing+Consent&family=My+Soul&family=Share+Tech+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Bitcount+Grid+Double:wght@100..900&family=Bitcount+Prop+Double:wght@100..900&family=Bitcount+Prop+Single:wght@100..900&family=Bitcount:wght@100..900&family=Dancing+Script:wght@400..700&family=Fascinate&family=Luckiest+Guy&family=Manufacturing+Consent&family=My+Soul&family=Rubik:ital,wght@0,300..900;1,300..900&family=Share+Tech+Mono&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    background-image:url('https://img.freepik.com/premium-photo/black-sky-with-stars-white-sky_327903-9995.jpg?w=996');
    background-size: cover;             /* Ensures it fills the screen */
    background-position: center;        /* Keeps the image centered */
    background-repeat: no-repeat;       /* Prevents repeating */
    background-attachment: fixed;
    color:#00ff00;
    font-size:20px;
    width:100vw;
    height:100vh;
    font-family: "Rubik";
}
header{
    padding-right:10%;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    width:100vw;
    height:10%;
    position:fixed;
    background:black;
    font-family:"Bitcount Prop Double";
    font-size:20px;
}
nav>ol{
    display:flex;
    justify-content:space-evenly;
    align-items:center;  
    width:100%; 
}
nav li{
    list-style:none;
    margin:50px;
}
/*text-decoration:none is used to remove the underline of a*/
nav li>a{
    text-decoration:none;
    color:#00ff00;
}
nav{
    width:300px;
    margin-right:50px; 
}
nav a:hover{
    background-color:#00ff00;
    padding:8px;
    border-radius:9px;
    color:black;
}
main{
    display:flex;
    justify-content:space-evenly;
    align-items:center;
    width:100vw;
}
/*shaper has a form elements in it*/
.shaper{
    width:60vw;
    max-width:600px;
    height:auto;
    background-color:rgba(0,0,0,0.7);
    border:1px solid #00ff00;
    border-radius:5vw;
    box-shadow:0 0 50px 3px #00ff00;
    text-align:center;
    margin-top:120px;
    padding:20px;
}
/*below the css styles of an element we can adjust 
the elements behavior through media queries*/
@media only screen and (max-width:970px){
    header{
        display:flex;
        justify-content:center;
        align-items:center;
    }
    header li{
        margin-right:35px;
    }
    main{
        font-size:18px;
    }
    .shaper{
        width:800px;
        border:none;
        box-shadow:none;
        margin-top:40px;
        background-color:rgba(0,0,0,0.3);
    }
}
form{
    margin:20px;
    padding-top:25px;
}
form>h1{
    margin-bottom:7%;
    font-family:"Bitcount Prop Double";
    font-size:45px;
    
}
label{
    display:inline-block;
    width:80%;
    text-align:left;
    margin-top:10px;
}
input[type='email'],input[type="password"],input[type="number"]{
    border:none;
    background:transparent;
    border-bottom:1px solid #00ff00;
    width:80%;
    height:22px;
    margin-left:-10px;

}
/*the third input type is writte as follows*/
input:nth-of-type(3){
    margin-bottom:10px;
}
input[type="radio"]{
    width:40px;
    height:12px;
    display:inline-block;
    accent-color:#00ff00;
    border:2px solid #00ff00;
    cursor:pointer;

}
/*the last type of input from the radio typed*/
input[type="radio"]:last-of-type{
    margin-bottom:10px;
}
fieldset{
    margin-top:10px;
    border:none;
}
input[type="checkbox"]{
    margin:10px;
    accent-color:#00ff00;
    cursor:pointer;
}
input[type="range"]{
    accent-color:#00ff00;
    margin:10px;
}
.sat{
    margin-top:20px;
}
textarea{
    background-color:black;
    border:2px solid #00ff00;
    width:70%;
    height:50px;
    margin:10px;
    color:#00ff00;
    outline:none;
}
textarea::placeholder{
    color:#00ff00;
}
/*:focus is used for inputs so that when the input place is 
pressed the following appears*/
input:focus{
    background-color:#00ff00;
    color:black;
}

button{
    display:block;
    width:74%;
    height:50px;
    text-align:center;
    margin:20px;
    margin-left:13%;
    background-color:black;
    border:1px solid #00ff00;
    color:#00ff00;
    font-size:28px;
    border-radius:10px;
    margin-bottom:40px;
    font-family: "Bitcount Prop Double"; 
    transition:color 0.3s; 

}
button:hover{
    background-color:#00ff00;
    color:black;
}

footer{
    color:#00ff00;
    display:flex;
    justify-content:center;
    align-items:center;
    width:100vw;
    height:auto;
    margin-top:100px;
    
}
.inside{
    color:#00ff00;
    width:80vw;
    height:100px;
    text-align:center;
}
p{
    font-style:italic;
    font-weight:bold;
    line-height:normal;
    text-transform:uppercase;
    transform:scale(1.2);
}
.icons a{
    color:#00ff00;
}
.icons{
    color:#00ff00;
    display:flex;
    justify-content:space-evenly;
    align-items:center;
    margin:20px;
    margin-left:35px;
    width:70vw;
    height:50px;
    text-align:center;
}
.icons a:hover{
    color:white;
}
.icons a:visited{
    color:green;
}