html, body {
    margin: 0;
    padding: 0;
    background-color: #000;
    font-family: 'Courier New';
    /*text-transform: uppercase;*/
  }

  canvas {
    /*cursor: none;*/
    display: block;
  }

  header {
    position: absolute;
    width: 100%;
    margin-top: 2%;
  }

  footer {
    position:absolute;
    width: 100%;
    bottom:0;
    /*margin-right: 10px;*/
  }
  footer div{
    margin-right: 2%;
    margin-bottom: 5%;
  }

  h1, h2, h3, h4{
    color: white;
    margin-left: 2%;
    display: inline;
  }
  p{
    color: white;
    font-size:2rem;
  }

  #change-to-landscape{
    display:none;
    color: white;
  }
  
  .hidden {
    display: none!important;
  }

  .center-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
  }

  .float-right{
    float: right;
  }
  
  i.fa {
    font-size: 1.5rem;
  }
  .legend-group a{
  margin-right: 15px;
  }

  footer i.fa {
      margin: 15px;
      font-size: 2rem;
      color: white;
  }

  .legend {
      display: inline;
      font-family: 'Courier New';
      font-size: 1rem;
      vertical-align: middle;
      color: white;
  }

  @media screen and (orientation:portrait) {
  /* Portrait styles */
    h1 {
      color: red;
    }

    canvas {
      display:none;
    }

    #change-to-landscape{
      display:block;
    }
    
    #change-to-landscape img{
        margin-left: auto;
        margin-right: auto;
        width: 50%;
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }
  }


.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
  }

  .legend-group{
    color: rgb(255,255,255);
    display: inline;
  }

  .legend-group .estudios{
    color: rgb(0,150,136);
  }

  .legend-group .experiencia-laboral{
    color: rgb(181,16,16);
  }

  a:hover, p:hover {
    font-weight: bold;
    cursor: default;
  }

  .cta p:hover {
    font-weight: initial;
  }
  
  i.fa-rotate-270{
    margin-right: 0px;
  }

  a.cta {
    display: none;
    margin-right: 4%;
    margin-top: 3%;
  }

  a:hover~.cta{
    display: initial;
  }