/* Below is the reset rule */
* {
    margin: 0; 
    padding: 0; 
    border: 0; 
    box-sizing: border-box; /* this makes it so 500px is truly 500px all around */
  
}

body{
    background-color: grey;
    color: rgb(255, 255, 213);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    overflow-x: hidden;
}

header{
    width: clamp(250px, 20vw, 400px);
   aspect-ratio: 1;
   border-radius: 50%;
   position: absolute; top: -10px; right: -10px;
   background-color: #222;
   text-align: center;
   display: flex;
   border: 4px solid    white;

}

h1{
    align-self: center;
    text-align: center;
    font-weight: normal;
    font-size: 2.5em;
    color: ;
}

table{
    width: 90%;
    margin: 200px auto 40px auto;
    border-collapse: collapse;
}

td{
    border: 2px solid white;
    padding: 8px;
}

td:first-child{
    width: 25%;
}

td:last-child{
    width: 75%;
}



label{
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 1.4em;
}

input[type=text], input[type=password], input[type=tel], input[type=url], input[type=email]{
    font-size: 1.6em;
    border: 2px groove orangered;
    box-shadow: 2px 2px 2px #222;
}

input[type=range]{
    transform: scale(2) translateX(100px);
}

span#numberoutput{
    color: yellow; font-size: 2em;
    padding-left: 300px;
}

input[type=checkbox], input[type=radio]{
    transform: scale(2);
    margin-left: 16px;
    margin-right: 8px;
}

button{
    background-color: orange;
    padding: 12px 16px;
    text-align: center;
    margin: 8px;
    color: white;
}