index.css

/* overall settings  */
*{
    text-decoration-line: none;
    color: black;
}

/* settings for background of page*/
body{

    background-image: url('../code/images/marble-white-1-2018.jpg');
    height: auto;
    overflow-x: hidden;

}


/* settings for the top name and welcome message */
header{
    display: block;
}


/* display name at the top of page */
.display_name{
    text-align: center;
    font-family: "Lucinda Console", Courier, monospace;
    font-weight: lighter;
    transform: scale(1.5,1.8);

}

/* welcome message under the name at top  */
.welcome_msg{
    text-align: center;
    font-family: "Lucinda Console", Courier;
    font-weight: lighter;
}

/* beggining of footer settings for school, major and name*/
footer{

  font-family: "Lucinda Console", 'Courier New', Courier, monospace;
  font-size: smaller;
  text-align: center;
  background-color: white;
}
.footer{
  padding-top: 30px;
}
/* end of footer settings */


/* the line after the columns for each page/section*/
.row::after{
  content: "";
  display: table;
  clear: both;
  padding-top: 30px;
  padding-left: 20px;
}


/* the settings for each card column*/
.column{
    text-align: center;
    background-color: white;
    border-style: solid;
    float: left;
    width: 30%;
    padding-left:30px;
    height: 450px;

    
}

/* about page column hover image*/
.column.about:hover{
    background-image: url(../code/images/hawaii_beach.JPG);
    background-repeat: no-repeat;
    background-size: 550px 400px;
    background-position: center;

}

/* project page column hover image*/
.column.project:hover{
    background-image: url(../code/images/yellowstone.JPG);
    background-repeat: no-repeat;
    background-size: 450px 400px;
    background-position: center;


}

/* contact page column hover image*/
.column.contact:hover{
    background-image: url(../code/images/wheel_disney.JPG);
    background-repeat: no-repeat;
    background-size: 300px 450px;
    background-position: center;

}

/* page/section title*/
h3{
    margin-top: 100%;
    font-size: xx-large;
    font-weight: 500;
    font-family: "Lucinda Console", 'Courier New', Courier, monospace;
    color:#e1ad01;
}

/*linked in, resume, certification settings*/
.columns{
  margin-left: 80px;
  max-height: 50px;
  max-width: 30%;
  display: inline;
  text-align: center;
}

/* linked in logo settings*/
.linked_in{
  max-width: 80px;
  width: 80px;
  height: 50px;
  max-height: 50px;
}
/* certification logo setting*/
.certification{

  max-width: 80px;
  width: 80px;
  height: 50px;
  max-height: 50px;

}
/* resume logo setting*/
.resume{

  max-width: 80px;
  width: 80px;
  height: 50px;
  max-height: 50px;

}

/* links settings for linked in , resume and certification*/
.rowss{
  
  font-family: "Lucinda Console", 'Courier New', Courier, monospace;
  background-color: white;
  border-style: solid;
  text-align: left;
  content: "";
  display: table;
  clear: both;
  width: 97%;
  margin-left: 10px;

}

/* nav bar item settings for status*/
a{
  text-align: center;
}
    
a:hover{
  text-decoration: underline;
  color:#e1ad01;
}
a:active{
  text-decoration: underline;
  background-color:#e1ad01;
  color:white;
}
a:focus{
text-decoration: underline;
  color:#e1ad01;
}

/* nav bar item setting for status ending*/



/* settings for mobile*/
@media screen and (max-width: 476px)
{
    .display_name{
        font-size: x-small;
    
      }
      li{
        text-align: center;
        display: block;
        font-size: smaller;
    
      }
      .rowss{
        display: block;
        margin-left: 0px;
        text-align: left;
        font-size: 10%;
        text-align: left;
      }
      .column{
        width: 30%;
        text-align: center;
        background-color: white;
        border-style: solid;
        float: left;
        padding-left:0px;
        height: 300px;

      }
      .column.about:hover{
        background-color: #e1ad01;
        background-image: none;

      }
      .column.project:hover{
        background-color: #e1ad01;
        background-image: none;
      }
      .column.contact:hover{
        background-color: #e1ad01;
        background-image: none;

      }
      h3{
        color: black;
        font-size: large;
      }
}


/* settings for ipad*/
@media screen and (max-width:768px)
{
    .display_name{
        font-size: x-small;
    
      }
      li{
        text-align: center;
        display: block;
        font-size: smaller;
    
      }
      .rowss{
        display: block;
        margin-left: 0px;
        text-align: left;
        font-size: 10%;
        text-align: left;
      }
      .column{
        width: 30%;
        text-align: center;
        background-color: white;
        border-style: solid;
        float: left;
        padding-left:0px;
        height: 300px;

      }
      .column.about:hover{
        background-color: #e1ad01;
        background-image: none;

      }
      .column.project:hover{
        background-color: #e1ad01;
        background-image: none;
      }
      .column.contact:hover{
        background-color: #e1ad01;
        background-image: none;

      }
      h3{
        color: black;
        font-size: large;
      }


}