#rayheadertext{
    color:red;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    margin-bottom: 0px;
    font-size: 8vw;
}

#rayheadersubtext{
    color:red;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    margin-top:5px;
    font-size:3vw;
}




.header{
    display:flex;
    padding:8px;
}

.flexspacer{
    flex-grow:1;
}

#rayface {
    width:18vw;
}

.marquee{
    background: #31a8d4;
    background: radial-gradient(circle, rgba(49, 168, 212, 1) 0%, rgba(5, 106, 173, 1) 51%);
    padding:0;
    margin-bottom:10px;
}

body{
    margin:0px;
    font-family: arial;
    display:flex;
    flex-direction: column;
    height:100%;
}

html{
    height:100%;
}

.orangetext{
    color: #ffa500;
}

marquee{
    color:white;
    font-size:4.3em;
    font-style: italic;
    padding-top:3px;
    behavior: alternate;
}

.fa-solid{
    padding-right:5px;
}

.content{
    flex-grow:1;
    text-align: center;
    font-size: 3em;
    background: #ffffff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 25%, rgba(70, 164, 227, 1) 100%);
}

.content p{
    margin:10px;
}

.footer{
    background: rgba(70, 164, 227, 1);
}

.service{
    background: #ff0000;
    background: linear-gradient(0deg, rgba(255, 0, 0, 1) 0%, rgba(255, 161, 161, 1) 100%);
    padding: 12px;
    border-radius: 100px;
    width: fit-content;
    margin: 10px;
    max-height: fit-content;
}

.contentheader{
    font-size: 2em;
    font-weight: 800;
    margin-top:60px;
    margin-bottom:20px;
}


table {

}

#services td{
    width:50%;
    border: 1px solid black
}

.portfolioimg {
    max-width: 80%;
    height: auto;
    padding: 0px 10px;
}


@media screen and (min-width: 1000px) {
    /** THIS is for desktop**/
  #rayheadertext {
    font-size: 44px;
  }

  #rayheadersubtext {
    font-size: 22px;
  }

  marquee {
    font-size:1.3em;
  }

  #rayface {
    width:120px;
  }

  .content {
    font-size: 1.5em;
  }

  
}