/*  

Abdulahi Abdi

8/26/24

I am creating my own student website. This is for an assignment and may be my website in the future. This CSS file is to


give my website some style and effects. */





/* TODO: style label to match wireframe */

th {

    color: white;
 
 }
 
 
 
 header {
 
 
 
    height: 50px;
 
    width: 1000px;
 
    /* learned this gradient code from W3schools, https://www.W3schools.com */
 
    background-image: linear-gradient(#54F3EA, #0AFBB3);
 
    padding: 5px;
 
    border-radius: 5px;
 
 }
 
 
 
 .move-further {
 
    margin-top: 70px;
 
 }
 
 
 
 button {
 
 
    border-radius: 10px;
 
    margin-left: 180px;
 
 
 
 }
 
 
 
 #calculate {
 
    margin-top: 10px;
 
    color: black;
 
    font-family: 'Verdana';
 
 }
 
 
 
 table,
 
 th,
 
 td {
 
    border: 3px solid black;
 
    border-radius: 5px;
 
 
 
 }
 
 
 
 label {
 
    color: white;
 
 }
 
 
 
 #answer {
 
    color: black;
 
    font-family: 'Verdana';
 
 }
 
 
 
 em {
 
    color: black;
 
 }
 
 
 
 .align {
 
    text-align: center;
 
    color: black;
 
 }
 
 
 
 h2 {
 
    font-family: 'Verdana';
 
    color: white;
 
 }
 
 
 
 strong {
 
    color: black;
 
    font-family: 'Verdana';
 
 }
 
 
 
 
 
 h4,
 
 h3 {
 
    color: white;
 
 }
 
 
 
 ul {
 
    color: white;
 
 }
 
 
 
 .move-up {
 
    margin-top: -70px;
 
    color: black;
 
 }
 
 
 
 /* remove div style if not wanted */
 
 div {
 
    background-image: linear-gradient(#399999, #0AFBB3);
 
    border-radius: 10px;
 
 }
 
 
 
 
 
 p {
 
    color: white;
 
 }
 
 
 
 
 
 h1 {
 
    color: white;
 
    /* searched fonts from W3schools, https://www.W3schools.com */
 
    font-family: 'Verdana';
 
    text-align: center;
 
    padding: 70px;
 
 }
 
 
 
 header,
 
 p {
 
    text-align: center;
 
 }
 
 
 
 main {
 
    background-color: black;
 
    object-position: center;
 
 }
 
 
 
 
 
 button {
 
    color: #045c41;
 
 }
 
 
 
 ol {
 
    align: center;
 
 }
 
 
 
 /* edit input properties to align with label */
 
 input {
 
    border-radius: 6px;
 
    margin-top: 10px;
 
    margin-left: 10px;
 
 }
 
 
 
 label {
 
    color: black;
 
    font-family: 'Verdana';
 
    display: inline-block;
 
    text-align: center;
 
    float: center;
 
    margin-top: 10px;
 
 }
 
 
 
 
 
 .column {
 
    float: left;
 
    width: 50%;
 
    padding: 10px;
 
    height: 300px;
 
    border-radius: 10px;
 
    margin-top: 5px;
 
 }
 
 
 
 
 
 .row:after {
 
    content: "";
 
    display: table;
 
    clear: both;
 
 }
 
 
 
 input {
 
    display: inline-block;
 
    text-align: center;
 
    float: left;
 
 }
 
 
 
 section {
 
    background-image: linear-gradient(#399999, #0AFBB3);
 
 
 
    height: 200px;
 
    width: 1000px;
 
    margin: 5px;
 
    border-radius: 25px;
 
 }
 
 
 
 
 
 body {
 
    /* image from google, searched green transparent origami */
 
    width: 10px;
 
    height: auto;
 
    background: black;
 
    width: 1000px;
 
 }
 
 
 
 img {
 
    width: 10%;
 
    height: 120%;
 
 }
 
 
 
 
 
 .whitefont {
 
    /* abstract image is a random design image from google */
 
    color: white;
 
    margin-top: 10px;
 
 }
 
 
 
 footer {
 
    background-color: #0AFBB3;
 
    border-radius: 10px;
 
 }